<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>我的收藏</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="collection container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <ul class="list" v-if="loading">
                    <li v-for="(item, index) in collectProductList" :key="index">
                        <div class="goods-box" @click="_goGoodsDetail(item)">
                            <img class="goods-img" :src="item.image" />
                            <div class="goods-name ellipsis" :title="item.store_name">{{ item.store_name }}</div>
                            <div class="goods-price td-fbc">
                                <span>¥{{ item.price }}</span>
                                <div class="del-btn" @click.stop="openDel(index)">删除</div>
                            </div>
                        </div>
                    </li>
                    <div class="nodata" v-if="collectProductList.length == 0">
                        <img :src="$global.Image.noCollection"/>
                    </div>
                </ul>
                <div class="pagination-box">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="pageChange"
                            :page-size="limit"
                            :total="count">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
    import leftNavBar from "@components/leftNavBar";
    import {getCollectUser, getCollectDel} from "@api/user";

    export default {
        data() {
            return {
                active: 3,
                loading:false,
                collectProductList: [],
                page: 1,
                count: '',
                limit: 20,
            };
        },
        components: {
            leftNavBar
        },
        methods: {
            // 获取收藏记录
            getMyCollect() {
                let that = this;
                that.collectProductList = []
                getCollectUser(that.page, that.limit).then(res => {
                    //apply();js将一个数组插入另一个数组;
                    that.count = res.count
                    that.collectProductList.push.apply(that.collectProductList, res.data);
                    this.loading=true
                });
            },
            // 更改页面
            pageChange(value) {
                this.page = value
                this.getMyCollect()
            },
            //删除窗口
            openDel(index) {
                this.$confirm('确定要删除此商品吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delCollection(index)
                });
            },
            //删除收藏；
            delCollection(index) {
                let that = this,
                    id = that.collectProductList[index].pid,
                    category = that.collectProductList[index].category;
                getCollectDel(id, category).then(function () {
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    that.getMyCollect()

                });
            },
            // 进入商品详情
            _goGoodsDetail(item) {
                this.$router.push("/detail/" + item.pid);
            },
            // 显示商品信息
            _showGoodsInfo(item) {
                this.$router.push("/detail/" + item.pid);
            }
        },
        mounted() {
            this.getMyCollect()
        }
    };
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
    $color: #DA213D;
    .collection {
        margin: 0 auto;
        display: flex;

        .right {
            width: 1000px;
            min-width: 1000px;
            margin-left: 32px;

            .line-ti {
                width: 100%;
                border-bottom: 1px solid #dbdbdb;

                > div {
                    color: #014a97;
                    font-size: 18px;
                    font-family: MicrosoftYaHei-Bold;
                    border-bottom: 3px solid $color;
                    width: 90px;
                    line-height: 36px;
                    font-weight: 600;
                    text-align: center;
                }
            }

            .list {
                // margin-top: 40px;
                overflow: hidden;
                min-height: 410px;

                 li {
                    float: left;
                    width: 33.333333%;
                    box-sizing: border-box;
                    border: 1px solid #dedede;
                    // padding: 20px 15px;

                    .goods-box {
                        width: 100%;
                        // margin: auto;

                        .goods-img {
                            width: 100%;
                            height: 280px;
                            display: block;
                            cursor: pointer;
                            object-fit: cover;
                        }

                        .goods-name {
                            font-size: 16px;
                            color: #333;
                            margin-top: 10px;
                            cursor: pointer;
                            padding: 0 15px;
                            box-sizing: border-box;
                        }

                        .goods-price {
                            margin-top: 5px;
                            padding: 0 15px;
                            margin-bottom: 20px;
                            box-sizing: border-box;

                            span {
                                font-size: 16px;
                                font-weight: bold;
                                color: #DA213D;
                            }

                            img {
                                display: block;
                                width: 23px;
                                height: 23px;
                                cursor: pointer;
                            }

                            .del-btn {
                                width: 44px;
                                height: 22px;
                                color: #DA213D;
                                cursor: pointer;
                                text-align: center;
                                line-height: 22px;
                                border: 1px solid #DA213D;
                                transition: all .3s;
                            }

                            .del-btn:hover {
                                color: #fff;
                                background: #DA213D;
                            }
                        }
                    }
                }

                li:hover {
                    background-color: #f8f8f8;
                }

                li:nth-child(4n + 4) {
                    border-right: none;
                }
            }

            .coll-list {
                display: flex;
                flex-flow: wrap;

                .li {
                    height: 412px;
                    width: 300px;
                    padding-top: 40px;
                    border-right: 1px solid #dbdbdb;
                    border-bottom: 1px solid #dbdbdb;
                    padding-left: 42px;
                    cursor: pointer;

                    .img-li {
                        width: 280px;
                        height: 280px;
                    }

                    > div:nth-of-type(1) {
                        color: rgba(51, 51, 51, 1);
                        font-size: 16px;
                        margin: 24px 0;
                        -webkit-line-clamp: 2;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    > div:nth-of-type(2) {
                        display: flex;
                        height: 21px;
                        align-items: center;
                        justify-content: space-between;

                        > div {
                            font-size: 16px;
                            color: #DA213D;
                            font-weight: 600;
                        }

                        .icon-li {
                            width: 19px;
                            height: 16px;
                            margin-right: 65px;
                        }
                    }
                }

                .li:nth-of-type(3n-2) {
                    padding-left: 0;
                }

                .li:nth-of-type(3n) {
                    border-right: none;
                }
            }
        }

        .page-box {
            margin-top: 40px;
        }
    }
</style>
